<template>
	<view class="page">
		<image class="background-image" src="/static/image-my/Frame 9529.png" mode="scaleToFill"></image>

		<view class="list-container">
			<!-- 协议和说明 -->
			<!-- <view class="list-item" @click="handleProtocol">
				<view>
					<text class="item-text">实名认证</text>
					<view>
						<text>完成实名认证，尊享更多服务 </text>
					</view>
				</view>

				<uni-icons type="right" size="23" color="rgb(180, 182, 192)"></uni-icons>
			</view> -->

			<!-- 账号注销 -->
			<view class="list-item">
				<text class="item-text">协议说明</text>
				<uni-icons type="right" size="23" color="rgb(180, 182, 192)"></uni-icons>
			</view>

			<!-- 退出登录 -->
			<view class="list-item last-item" @click="handleAccountCancel">
				<text class="item-text">账号注销</text>
				<uni-icons type="right" size="23" color="rgb(180, 182, 192)"></uni-icons>
			</view>

		</view>

		<button class="but" @click="handleLogout">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 初始化用户信息为空对象，避免null
				userInfo: {}
			}
		},
		onLoad() {
			// 页面加载时获取用户信息
			this.getUserInfo();
		},
		methods: {
			// 安全获取用户信息
			getUserInfo() {
				try {
					const storedInfo = uni.getStorageSync('userInfo');
					this.userInfo = storedInfo ? {
						avatar: storedInfo.avatar || '/static/default-avatar.png',
						nickName: storedInfo.nickName || '未登录用户',
						phone: storedInfo.phone || '',
						id: storedInfo.id || ''
					} : this.getDefaultUserInfo();
				} catch (e) {
					console.error('获取用户信息失败:', e);
					this.userInfo = this.getDefaultUserInfo();
				}
			},

			// 获取默认用户信息
			getDefaultUserInfo() {
				return {
					avatar: '/static/default-avatar.png',
					nickName: '未登录用户',
					phone: '',
					id: ''
				};
			},

			// 协议和说明
			handleProtocol() {
				uni.navigateTo({
					url: '/pages/user/protocol'
				})
			},

			// 账号注销
			handleAccountCancel() {
				uni.navigateTo({
					url: '/pages/off/off' // 根据你的实际页面路径调整
				});
			},

			// 退出登录
			handleLogout() {
				uni.showModal({
					title: '提示',
					content: '确定要退出登录吗？',
					success: (res) => {
						if (res.confirm) {
							this.processLogout(false);
						}
					}
				})
			},

			// 统一的登出处理逻辑
			processLogout(isAccountCancel) {
				uni.showLoading({
					title: '处理中...'
				});

				// 清除本地存储
				uni.removeStorageSync('token');
				uni.removeStorageSync('userInfo');

				// 重置用户信息
				this.userInfo = this.getDefaultUserInfo();

				// 通知全局用户信息变更
				uni.$emit('updateUserInfo', this.userInfo);

				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: isAccountCancel ? '账号已注销' : '已退出登录',
						icon: 'success'
					});

					// 跳转到我的页面
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/my/my'
						});
					}, 1500);
				}, 2000);
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		background-color: #f7f7f7;
		height: 100vh;
	}

	.background-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 0;
	}

	.list-container {
		position: relative;
		top: 25rpx;
		background-color: #fff;
		z-index: 1;
		margin: 0 30rpx;
		border-radius: 20rpx;

	}

	.list-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 32rpx;
		border-bottom: 1rpx solid #f0f0f0;

		&.last-item {
			border-bottom: none;
		}
	}

	.item-text {
		font-size: 32rpx;
		color: #333;
		font-weight: 600;
	}

	.arrow-icon {
		width: 32rpx;
		height: 32rpx;
	}

	.but {
		margin-top: 73vh;
		bottom: 100rpx;
		width: 90vw;
		border-radius: 50rpx;
		background-color: rgb(219, 83, 51);
		color: #fff;
		font-size: 22;

	}
</style>